<script setup lang="ts">
import { ref, reactive } from "vue";
import { HxqTextArea } from "vue-mobile-hxq";

const address = ref("");
const formVal = reactive({
  remark: [{ required: true, message: "请输入备注！" }],
});

const dataSource = reactive([
  {
    key: "1",
    name: "label",
    param: "string",
    desc: "标题",
  },
  {
    key: "3",
    name: "isRequire",
    param: "boolean",
    desc: "是否必填",
  },
  {
    name: "v-model",
    param: "string",
    desc: "双向绑定值",
  },
  {
    name: "placeholder",
    param: "string",
    desc: "文本框提示文字",
  },
  {
    name: "message",
    param: "string",
    desc: "必填验证提示文字",
  },
  {
    name: "name",
    param: "string",
    desc: "表单提交字段值",
  },
  {
    name: "showWordLimit",
    param: "boolean",
    desc: "显示字数统计",
  },
  {
    name: "maxlength",
    param: "string",
    desc: "输入的最大字符数",
  },
]);
</script>
<template>
  <div class="public-flex-box">
    <div class="public-phone-title">文本域输入</div>
    <div class="public-usage-box">
      <hxq-text-area
        :isRequire="formVal.remark[0].required"
        label="备注"
        :message="formVal.remark[0].message"
        name="remark"
        :placeholder="'请输入备注'"
        v-model="address"
      >
      </hxq-text-area>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
